<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			table {
				margin: 50px auto 0;
				/*
					合并边框
				*/
				border-collapse: collapse;
			}

			th, td {
				border: 2px solid black;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>分数</th>
			</tr>
		</table>
		
	</body>
</html>
<script>
	
	// 创建一个table元素
	// var table = document.createElement('table');

	// 创建一个tr元素
	// var tr0 = document.createElement('tr');

	// 将table拼接到body中
	// document.body.appendChild(table);

	// 将tr0拼接到table中
	// table.appendChild(tr0);

	// var arr = ["姓名", "性别", "分数"];
	// arr.forEach(function(item) {

	// 	var th = document.createElement('th');
	// 	th.innerHTML = item;
	// 	tr0.appendChild(th);
	// });


	// 获取table元素
	var table = document.querySelector('table');

	// 插入一行
	// table.insertRow();

	// 获取table中的所有tr
	// console.log(table.rows);

	// 获取第二行
	// console.log(table.rows[1]);

	// 在tr中插入单元格
	// table.rows[1].insertCell();
	// table.rows[1].insertCell();
	// table.rows[1].insertCell();
	// console.log(table.rows[1].cells);

	// table.rows[1].cells[0].innerHTML = "小明";
	// table.rows[1].cells[1].innerHTML = "男";
	// table.rows[1].cells[2].innerHTML = 100;

	var students = [
		["王开宇", "男", 90],
		["王鹏飞", "男", 80],
		["马超群", "男", 65],
		["丁笑笑", "女", 95]
	];

	// 创建4行
	for (var j = 0; j < students.length; j++) {
		table.insertRow();
		for (var i = 0; i < students[j].length; i++) {	
			table.rows[j + 1].insertCell();
			table.rows[j + 1].cells[i].innerHTML = students[j][i];
		}
	}

	/*
	students.forEach(function(item, index) {
		// 创建行
		table.insertRow();

		item.forEach(function(ele, i) {

			table.rows[index + 1].insertCell();
			table.rows[index + 1].cells[i].innerHTML = students[index][i];

		});

	});
	*/



</script>